<!--
  -- 描述：审核的列表Table组件
  --
-->
<template>
  <div>
    <!--查询结果列表-->
    <el-table
      border
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-top:10px;">
      <el-table-column
        type="index"
        width="40">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名">
      </el-table-column>
      <el-table-column
        width="150px;"
        label="请假类型">
        <template slot-scope="scope">
          <!--<el-tag style="margin-right: 5px" type="info" size="medium" v-for="(item, index) in scope.row.positions" :key="index">-->
          <p v-for="(item, index) in scope.row.detailList" :key="index">
            {{item.leaveName}} : {{item.leaveDay}}天
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="工作单位">
      </el-table-column>
      <el-table-column
        prop="zw"
        label="职务">
      </el-table-column>
      <el-table-column
        prop="zwjbName"
        label="级别">
      </el-table-column>
      <el-table-column
        prop="zwlbName"
        label="职务种类">
      </el-table-column>
      <el-table-column
        width="150px;"
        label="请假时间">
        <template slot-scope="scope">
          <span>{{parseDate(scope.row.leaveStartTime)}}至{{parseDate(scope.row.leaveEndTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="leaveDays"
        label="总天数">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="申请时间">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.createDate)}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="jzOption"-->
        <!--label="分局主要领导意见">-->
      <!--</el-table-column>-->
      <el-table-column
        width="150"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="success" size="medium" v-if="scope.row.flag===1">同意请假</el-tag>
          <el-tag type="danger" size="medium" v-else-if="scope.row.flag===2">不同意休假</el-tag>
          <el-tag type="warning" size="medium" v-else>正在呈批</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="详情" v-if="hasPerm('leave-detail')">
            <el-button type="text" size="small" @click="openDetailForm(scope.row)"><i class="fas fa-eye"></i> 详 情
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="审核" v-if="hasPerm('review-add')">
            <el-button type="text" size="small" @click="openAddEditForm(scope.row)"
                       v-if="queryParams.pageIndex === 'REVIEW'"><i class="fas fa-edit text-warning"> 审 批</i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="custom-pagination"
      @current-change="query"
      :current-page.sync="queryParams.pageNumber"
      :page-size="queryParams.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="tableDataTotal"
      style="text-align:right;">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "ReviewTable",
    props: ['pageIndex', 'queryParams'],
    mounted: function () {
      if (this.queryParams) {
        this.query();
      }
    },
    data() {
      return {
        loading: false,
        tableData: [],// 结果列表参数
        tableDataTotal: 0,
        selectedRows: []
      }
    },
    methods: {
      query: function (currPage) {
        if (!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/app-holiday/holiday/leave/list', this.queryParams)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = data.data.total;
            this.loading = false;
          });
      },
      parseTime: function (time) {
        return this.$moment(time).format('YYYY-MM-DD HH:mm:ss');
      },
      parseDate: function (time) {
        return this.$moment(time).format('YYYY-MM-DD');
      },
      multiSelectedChange: function (val) {
        this.selectedRows = val;
      },
      openAddEditForm: function (data) {
        this.$emit('openAddEditForm', data);
      },
      openDetailForm: function (data) {
        this.$emit('openDetailForm', data);
      }
    }
  }
</script>

